var slider=document.querySelector(".slideshow"),
 	prev=document.querySelector(".slideshow .previous"),
 	next=document.querySelector(".slideshow .next"),
 	btns=document.querySelectorAll(".btn_slide span"),
 	lis=document.querySelectorAll(".slideshow li img"),
 	index=0,	
 	length=lis.length;
 	lis[0].style.opacity='1',
 	is_run=false;

//左切图
prev.addEventListener("click",function(){
	if(!is_run){
		is_run=true;
		lis[index].style.opacity='0';	
		btns[index].className='';
		index--;
		index=index<0?length-1:index;//三目判断
		lis[index].style.opacity='1';
		btns[index].className='on';
	}
	is_run=false;
})

//右切图
next.addEventListener("click",function(){
	if(!is_run){
		is_run=true;
		lis[index].style.opacity='0';
		btns[index].className='';
		index++;
		index=index%length;
		lis[index].style.opacity='1';
		btns[index].className='on';
	}
	is_run=false;
})

//自动轮播
var timer=setInterval(function(){
	lis[index].style.opacity='0';
	btns[index].className='';
	index++;
	index=index%length;
	lis[index].style.opacity='1';
	btns[index].className='on'; 
},2000)

//鼠标移上去清除动画
slider.onmousemove=function(){
	clearInterval(timer);
}
//鼠标移走开始动画
slider.onmouseout=function(){
	is_run=true;
	timer=setInterval(function(){
	lis[index].style.opacity='0';
	btns[index].className='';
	index++;
	index=index%length;
	lis[index].style.opacity='1';
	btns[index].className='on'; 
	},3000) ;
	is_run=false;
}

//圆点切图
for(i=0;i<btns.length;i++){
	btns[i].index=i;
	btns[i].addEventListener("click",function(){
		lis[index].style.opacity='0';
		btns[index].className='';
		index=this.index;
		lis[index].style.opacity='1';
		btns[index].className='on';
	})
}


//中部切图
var btn_left=document.querySelector(".btn_left"),
	btn_right=document.querySelector(".btn_right"),
	btn_change_img=document.querySelectorAll(".btn_change_img li"),
	btn_ul=document.querySelector(".btn_change_img ul"),
	now_index=0,
	last_index=0;
	
	btn_left.addEventListener("click",function(){
			last_index=now_index;
			--now_index < 0 ? now_index = btn_change_img.length-6: "";
			btn_ul.style.transform="translateX(-"+200*now_index+"px)";			
	})
	
	btn_right.addEventListener("click",function(){			
//			if(now_index++>=btn_change_img.len-6){				
//				now_index=0;
//			}			
			console.log(now_index);
			last_index=now_index;
			++now_index>=btn_change_img.length-5?now_index=0:"";//正则
			btn_ul.style.transform="translateX(-"+200*now_index+"px)";
			
			
	})